<template>
	<view class="content">
		<view class="main">
			<scroll-view :refresher-enabled="false" class="scroll-content" @scrolltolower="scrolltolower"
				@scroll="scrollPage" @refresherrefresh="refresherpulling" :refresher-triggered="isrefresher" scroll-y
				:lower-threshold="110" show-scrollbar="false">
				<view class="content-top fixed_top" :style="bgOpacity" id="content_top">
					<van-nav-bar :title="title" left-arrow @click-left="onClickLeft" id="navBar"> </van-nav-bar>
				</view>
				<view class="scroll-card">
					<view class="sur_box_bg">
						<view class="sur_box"></view>
						<!-- <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/merchant/merchantBg.png" alt="" /> -->
					</view>
					<!-- :style="titleTop" -->
					<view class="scrollMain_container" style="margin-top: -378rpx;" >
						<view class="my_info_box">
							<view class="info_box_top">
								<view class="box_top_detail_left" @click="onClickUserInfo">
									<view class="info_img"><img :src="selfPickInfo.avatarUrl ?selfPickInfo.avatarUrl:defaultAvatarUrl"
											style="width: 100rpx;height: 100rpx; " /> </view>
									<view class="info_name">
										<view class="merchantName">{{selfPickInfo.selfPickName}}</view>
										<view class="merchantInfo"> <van-icon name="clock-o" style="margin-right: 10rpx;"/><span> {{ selfPickInfo.businessHours }}</span> <span class="line">|</span> <span>{{ selfPickInfo.phone }}</span> </view>
									</view>
								</view>
								<van-search :value="value" placeholder="请输入手机号/取件码/运单号" use-action-slot
									custom-style="padding: 0;" @search="onSearch" @click-input="clickInput" disabled>
									<view slot="action" @click="scanCode" class="scan-icon">
										<van-icon name="scan" size="24px" color="#ff6203" />
									</view>
								</van-search>
							</view>
						</view>
						<view class="statistic">
							<view class="stats">
								<view class="stat-item" @tap="navigateToStock('await')">
									<text class="stat-value">{{ pendingEntry }}</text>
									<text class="stat-label">待入库</text>
								</view>
								<view class="stat-item" @tap="navigateToStock('hasIn')">
									<text class="stat-value" >{{ todayEntry }}</text>
									<text class="stat-label">今日入库</text>
								</view>
								<view class="stat-item" @tap="navigateToStock('hasOut')">
									<text class="stat-value">{{ todayExit }}</text>
									<text class="stat-label">今日出库</text>
								</view>
								<view class="stat-item"  @tap="navigateToStock('abnormal')">
									<text class="stat-value">{{ abnormal }}</text>
									<text class="stat-label">当前异常</text>
								</view>
								<view class="stat-item" @tap="navigateToStock('currentStock')">
									<text class="stat-value">{{ currentInventory }}</text>
									<text class="stat-label">当前库存</text>
								</view>
								<view class="stat-item" @tap="navigateToStock('PENDING')">
									<text class="stat-value">{{ retentionOrders }}</text>
									<text class="stat-label">滞留单</text>
								</view>
								<view class="stat-item" @tap="navigateToStock('returnAwaitIn')">
									<text class="stat-value">{{ returnsPendingEntry }}</text>
									<text class="stat-label">退货待入库</text>
								</view>
								<view class="stat-item"@tap="navigateToStock('returnAwaitOut')">
									<text class="stat-value">{{ returnsPendingExit }}</text>
									<text class="stat-label">退货待出库</text>
								</view>
							</view>
							<!-- 扫描区域 -->
							<view class="scan-area">
								<view class="scan-item scanIn" @click="scanIn">
									<view class="sacnItem-img"><image src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/InScanIcon.png"></image></view>
									<view style="text-align: left;">
										<view class="sacn-item-title">入库扫描</view>
										<view class="sacn-item-label">快速扫描入库</view>
									</view>

								</view>
								<view class="scan-item scanOut" @click="scanOut">
									<view class="sacnItem-img"><image src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/outScanIcon.png"></image></view>
									<view style="text-align: left;">
										<view class="sacn-item-title">出库扫描</view>
										<view class="sacn-item-label">快速扫描出库</view>
									</view>
								</view>
							</view>
							<!-- 常用功能区域 -->
							<view class="function-area">
								<text class="function-title">常用功能</text>
								<view class="function-list">
									<view class="function-item" @click="toBatch('await',0)">
										<image src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/batchIn.png"></image>
										<text>批量入库</text>
									</view>
									<view class="function-item" @click="toBatch('hasIn',1)">
										<image src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/batchOut.png"></image>
										<text>批量出库</text>
									</view>
									<view class="function-item" @click="afterSale('returnAwaitIn',0)">
										<image src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/afterSaleIn.png"></image>
										<text>退货入库</text>
									</view>
									<view class="function-item" @click="afterSale('returnAwaitOut',1)">
										<image src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/afterSaleOut.png"></image>
										<text>退货出库</text>
									</view>
									<!-- <view class="function-item" @click="checkInventory">
										<image src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/inventory.png"></image>
										<text>库存</text>
									</view>
									<view class="function-item" @click="checkedOut">
										<image src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/checkedOut.png"></image>
										<text>已出库</text>
									</view>
									<view class="function-item" @click="rejectSign">
										<image src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/rejectSign.png"></image>
										<text>拒签</text>
									</view> -->
								</view>
							</view>

							<!-- logo -->
							<view class="logo_img t13">
								<img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/logo_img.png"
									alt="" style="height: 56rpx; width:238rpx ;" />
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import {getSelfPickupFirstPageApi} from '@/api/merchant'
import { tabBar } from '@/mycomponents/tabBar'
import {authMixin} from '@/utils/isLogin'
// const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

export default {
	components: {
		tabBar
	},
	data() {
		return {
			title: '',
			value: undefined,
			value2: 'a',
			menuButtonTop:'',
			titleTop:'0px',
			pendingEntry: 0, //等待入库
			todayEntry: 0, //今日入库
			todayExit: 0, //今日出库
			abnormal: 0, //当前异常
			currentInventory:0, //当前库存 
			overstayOrders: 0,  // 新增滞留单统计
			returnsPendingEntry:0, //待退货入库
			returnsPendingExit:0, //待退货出库
			retentionOrders: 0,  // 新增滞留单统计
			// todayAfterSale: 0,
			// overtimeOrders: 5,
			isLogin:false,
			selfPickInfo:null, //自提点信息
			businessHours:'08:00-19:00',
			phone:'15632654125',
			defaultAvatarUrl:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/defaultAvatar.png",
			nickName:'张新萍',
			externalLink:'https://open.work.weixin.qq.com/wwopen/uriconfirm?err_type=param_err&uri=https%3A%2F%2Fopen.weixin.qq.com%2Fconnect%2Foauth2%2Fauthorize%3Fappid%3Dwx154e925eb1f54c86%26redirect_uri%3Dhttps%3A%2F%2Fm.zhipin.com%2Fwapi%2Fzpweixin%2Fofficial%2Fauth%2Fboss%26response_type%3Dcode%26scope%3Dsnsapi_userinfo%26state%3Dffd87bcb44a4b4213809bb2e7f059f8c%26connect_redirect%3D1%23wechat_redirect&ts=1735120731&nonce=025eeb2d55994271&sig=56776787b1658bcb218eafb4e0dd5d5d6be8c1a3&bar_style_type=2',
			statusMap: {
                'await': 1,
                'hasIn': 2,
                'hasOut': 3,
                'abnormal': 4,
                'returnAwaitIn': 5,
                'returnAwaitOut': 6,
                'currentStock': 7,
                'PENDING': 8
            }
		}
	},
	onLoad() {
		const avatarUrl= uni.getStorageSync('userInfo').avatarUrl
		const nickName=uni.getStorageSync('userInfo').nickName

		if(avatarUrl){
			this.avatarUrl=avatarUrl
		}
		if(nickName){
			this.nickName=nickName
		}
		const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
        console.log('胶囊按钮高度：', menuButtonInfo.height);
        console.log('胶囊按钮top：', menuButtonInfo.top,menuButtonInfo);

        this.menuButtonTop = menuButtonInfo.top
        this.titleTop='margin-top:'+( -( this.menuButtonTop + menuButtonInfo.height + 48 )) +'px' 
        console.log(this.titleTop)
	},
	onReady(){
		const access_token = uni.getStorageSync('access_token');
		if(access_token){
			this.isLogin=true
		}else{
			this.isLogin=false
		}
		console.log(access_token)
	},
	onShow(){

		// 通过本地有无token 判断是否已经登录
		const access_token = uni.getStorageSync('access_token');
		if(access_token){
			this.isLogin=true
		}else{
			this.isLogin=false
		}


		const avatarUrl= uni.getStorageSync('userInfo').avatarUrl
		const nickName=uni.getStorageSync('userInfo').nickName

		if(avatarUrl){
			this.avatarUrl=avatarUrl
		}
		if(nickName){
			this.nickName=nickName
		}
		this.getSelfPickupFirstPageStatistics()
	},
	methods: {
		clearStorage() {
			uni.showToast({
				title: '清除成功',
				icon: 'success',
				duration: 2000, // 提示的延迟时间，单位毫秒，默认：1500
				mask: false, // 是否显示透明蒙层，防止触摸穿透，默认：false
				// image:'./image.png',//自定义图标的本地路径
			})
		},
		scrollPage (e) {
            this.bgOpacity = `opacity:${1 - e.detail.scrollTop / this.navHeight}`
        },
		onClickLeft () {
            uni.reLaunch({
                url: '/pages/my/mine'
            })
        },
		scanCode() {
			// 实现入库扫描逻辑，比如调用扫码API
			console.log('执行入库扫描');
			const params = {
				handle:'scanIn'
			}
			uni.redirectTo({
				url: '/pages/merchant/scanPage?params=' +
				encodeURIComponent(JSON.stringify(params))
			})
			// uni.scanCode({
			// 	success: (res) => {
			// 		console.log('扫码结果:', res);
			// 		this.value = res.result; // 自动填充扫码结果
			// 	},
			// 	fail: (err) => {
			// 		uni.showToast({
			// 			title: '扫码失败，请重试',
			// 			icon: 'none'
			// 		});
			// 	}
			// });
		},
		onSearch(e) {
			// 处理搜索逻辑
			console.log('搜索内容:', e.detail);
			uni.redirectTo({
				url: `/pages/merchant/search?search=${e.detail}`
			});
		},
		clickInput() {
			// 处理点击输入框的逻辑
			console.log('点击输入框');
			uni.redirectTo({
				url: '/pages/merchant/search'
			});
		},
		navigateToStock(type) {
            const statusNumber = this.statusMap[type];
			if (statusNumber !== undefined) {
                uni.redirectTo({
                    url: `/pages/merchant/stockInOrOut?type=${type}&statusNumber=${statusNumber}`
                });
            } else {
                console.error('未找到对应的状态数字', type);
            }
			// uni.redirectTo({
			// 	url: `/pages/merchant/stockInOrOut?type=${type}`
			// });
		},


		// // 待入库  已入库
		// tostockIn(type){
		// 	uni.redirectTo({
		// 		url: `/pages/merchant/stockInOrOut?type=${type}`
		// 	});
		// },
		// // 已入库  已出库
		// tostockOut(type){
		// 	uni.redirectTo({
		// 		url: `/pages/merchant/stockInOrOut?type=${type}`
		// 	});
		// },
		// // 当前异常
		// toAbnormal(type){
		// 	uni.redirectTo({
		// 		url: `/pages/merchant/stockInOrOut?type=${type}`
		// 	});
		// },
		scanIn() {
			// 实现入库扫描逻辑，比如调用扫码API
			console.log('执行入库扫描');
			const params = {
				handle:'scanIn'
			}
			
			console.log()
			uni.redirectTo({
				url: '/pages/merchant/scanPage?params=' +
				encodeURIComponent(JSON.stringify(params))
			});
		},
		scanOut() {
			// 实现出库扫描逻辑
			console.log('执行出库扫描');
			console.log('执行入库扫描');
			const params = {
				handle:'scanOut'
			}
			console.log()
			uni.redirectTo({
				url: '/pages/merchant/scanPage?params=' +
				encodeURIComponent(JSON.stringify(params))
			});
		},
		toBatch(type,val) {
			console.log('执行批量出入库',type,val);
			const statusNumber = this.statusMap[type];
			const params = {
				handle:'batch'+type,
				activeTab:val,
				statusNumber:statusNumber
			}
			uni.redirectTo({
				url: '/pages/merchant/batchInOrOut?params=' +
				encodeURIComponent(JSON.stringify(params))
			});
		},
		afterSale(type,val) {
			console.log('执行售后入库');
			const statusNumber = this.statusMap[type];
			const params = {
				handle:'afterSale'+type,
				activeTab:val,
				statusNumber:statusNumber
			}
			uni.redirectTo({
				url: '/pages/merchant/batchInOrOut?params=' +
				encodeURIComponent(JSON.stringify(params))
			});
		},

		checkInventory() {
			console.log('查看库存');
		},
		checkedOut() {
			console.log('查看已出库');
		},
		rejectSign() {
			console.log('处理拒签');
		},
		getSelfPickupFirstPageStatistics(){
			getSelfPickupFirstPageApi().then(res=>{
				console.log(res)
				if(res.code==200){
					this.selfPickInfo=res.data
					this.pendingEntry=res.data?.pendingEntry || 0
					this.todayEntry=res.data?.todayEntry ||0
					this.todayExit=res.data?.todayExit ||0
					this.abnormal=res.data?.abnormal ||0
					this.currentInventory=res.data?.currentInventory ||0
					this.retentionOrders=res.data?.retentionOrders ||0  // 新增滞留单统计
					this.returnsPendingEntry=res.data?.returnsPendingEntry ||0  //退货待入库
					this.returnsPendingExit=res.data?.returnsPendingExit ||0  //退货待出库
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>

.content {
	// position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height:100vh;
	overflow-y: auto;
	justify-content: center;
	z-index: 1;
	background-size: 100%;
	background-color: #FFFFFF;

}
.main {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    background-color: #FFFFFF;

    .fixed_top {
        position: fixed;
        width: 100%;
        z-index: 999;
    }

    .top_display {
        display: none;
    }
}
::v-deep .van-nav-bar {
    background-color: transparent;
	z-index: 4;
}
::v-deep #navBar .van-icon {
    color: #111111 !important;
}
#navBar{
	z-index: 4;
}
.scroll-content {
    flex: 1;
    height: 1px;
}
.scroll-card{
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100vh;
	z-index: -1;
	background-color: #FFFFFF;
}

//背景图部分
.sur_box_bg {
	position: relative;
	width: 100%;
	height: 540rpx;
	// background: linear-gradient(180.00deg, #ff62024d 0%, #ff620200 100%);

	img {
		width: 100%;
		height: 540rpx;
	}
    .sur_box{
        width: 100%;
		height: 540rpx;
		background: linear-gradient(180.00deg, #ff62024d 0%, #ff620200 100%);
	 }
}

.scrollMain_container{
	width: 100%;
	background-color: transparent;
	z-index: 1;
	padding-bottom: 100rpx;
}

// 头像名字积分
.my_info_box {
	margin-left: 48rpx;
	margin-right: 48rpx;
	width: calc(100% - 96rpx);
	z-index: 5;
	border-color: none;

	.info_box_top {
		border-radius: 6px;

		.box_top_detail_left {
			display: flex;

			.info_img {
				position: relative;
				width: 114rpx;
				height: 114rpx;
				background: rgb(255, 255, 255, 0.5);
				border-radius: 50%;
				img{
					position: absolute;
					border-radius: 50px;
					left: 8rpx;
					top: 8rpx;
				}
				image{
					position: absolute;
					border-radius: 50px;
					left: 8rpx;
					top: 8rpx;
				}
			}

			.info_name {
				margin-left: 38rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.merchantName{
					font-size: 44rpx;
					color: #333333;
					font-weight: bold;
				}
				.merchantInfo{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #666666;
					margin-top:16rpx;

					.line{
						width: 2rpx;
						height: 24rpx;
						background: #fff;
						opacity: 0.5;
						margin: 0 24rpx;
						color: #fff;
					}
				}
			}
			// 登录注册
			.register{
				font-size: 38rpx;
				text-align: left;
				color: #111111;
				line-height: 38rpx;
			}
			.weui-input{
				margin-left:30rpx;
			}
		}

		.box_top_detail_right {
			border-radius: 4px;
			margin-top: 26rpx;
			margin-bottom: 28rpx;
			background: linear-gradient(182deg, #FFFFFF 0%, #FFEADD 100%,#FFFFFF 0%,);  //橘色
			// background-color: rgba(242,236,222,1);
			// background: #FFEADD;
			font-weight: bolder;
			font-size: 24rpx;
			color: #333333;
			padding: 14rpx 24rpx 14rpx 24rpx;
		}

		.box_top_detail_b {
			display: flex;
			justify-content: space-between;
			margin-top: 62rpx;
			padding-left: 20rpx;
			// padding-right: 38rpx;
			padding-right: 20rpx;

			.detail_b_content {
				.detail_b_num {
					font-weight: bolder;
					font-size: 38rpx;
					text-align: center;
					color: #191919;
				}

				.detail_b_name {
					margin-top: 22rpx;
					// font-weight: bold;
					font-size: 24rpx;
					text-align: center;
					color: #111111;
				}
			}
		}
	}
}
.statistic{
	padding-left: 48rpx;
	padding-right: 48rpx;
	border-radius: 40rpx 40rpx 0 0;
	background: #fff;
	margin-top: 40rpx;
	padding-top: 56rpx;
}

.stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;  /* 从左到右排列 */
}
.stat-item {
	width: 25%;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 48rpx;

	.stat-value {
		font-size: 64rpx;
		font-weight: bolder;
		color:#333333 ;
	}

	.stat-label {
		margin-top: 16rpx;
		font-size: 28rpx;
		line-height:28rpx;
		color: #333333;
	}
}

.scan-area {
  display: flex;
  justify-content: space-around;
  margin-bottom: 48rpx;
}
.scan-item {
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	padding: 48rpx 0rpx;
	border-radius: 16rpx;
    width: calc((100% - 30rpx)/2);
}
.scanOut{
	background-color: rgb(19, 138, 244, 0.1);
	margin-left: 30rpx;
}
.scanIn{
	background-color: rgb(255, 154, 34, 0.1);
}
.scan-item .sacnItem-img {
	// margin-right: 20rpx;
	width: 80rpx;
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 16rpx;
}
.scan-item image {
  width: 80rpx;
  height: 80rpx;
}
.scan-item .sacn-item-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}
.scan-item .sacn-item-label {
  font-size:24rpx;
  margin-top:8rpx ;
  color: #999999;
}
.function-area {
	margin-top: 52rpx;
	// padding: 20rpx;
	// border-radius: 10rpx;
}
.function-title {
  font-size: 36rpx;
  color: #333333;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.function-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;  /* 从左到右排列 */
  gap: 0 4%;  /* 添加横向间距 */
}
.function-item {
  text-align: center;
  width: 21%;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;  /* 垂直居中 */
  margin-top: 56rpx;
}
.function-item image {
  width: 80rpx;
  height: 80rpx;
}
.function-item text {
	margin-top: 16rpx;
	font-size: 28rpx;
	// line-height: 28rpx;
	color: #333333;
}
button{
    border: none;
}
button[plain]{
    border:none;
}
// logo
.logo_img {
	text-align: center;
}




.r5 {
	margin-right:10rpx;
}

.r10 {
	margin-right: 20rpx;
}

.t1 {
	margin-left: 2rpx;
}

.t2 {
	margin-top: 4rpx;
}

.t5 {
	margin-top: 10rpx;
}

.t7 {
	margin-top: 14rpx;
}

.t9 {
	margin-top: 18rpx;
}

.t10 {
	margin-top: 20rpx;
}
.t17{
	margin-top: 34rpx;
}
.t13 {
	margin-top: 26rpx;
}

.b1 {
	margin-right: 2rpx;
}

.b9 {
	margin-bottom: 18rpx;
}

.b11 {
	margin-bottom: 22rpx;
}

.b12 {
	margin-bottom: 24rpx;
}

.b13 {
	margin-bottom: 26rpx;
}

button{
	padding: 0px !important;
	margin: 0px !important;
	border: none !important;
	background-color: transparent !important;
}
button[plain] {
    background-color: transparent;
    border:none ;
}
// 搜索框
::v-deep .van-search{
	padding: 0px !important;
	margin-top: 22rpx;
	height: 70rpx;
}
::v-deep .van-search__content {
    background-color:transparent;
    // border-radius: 2px;
    // display: flex;
    // flex: 1;
    // padding-left: var(--padding-sm,12px);
}
// 搜索框后的 扫描的图标
.scan-icon {
    // padding: 0 16rpx;
    // border-left: 1px solid #eee;
    // margin-left: 20rpx;
	height: 70rpx;
	line-height: 70rpx !important;
}
::v-deep .van-search__action {
	color: #FF6203 !important;
	line-height: 70rpx !important;
}
::v-deep .scan-icon .van-icon, .van-icon-scan{
	color: #FF6203 !important;
	line-height: 70rpx !important;
}
</style>
